<%--
 Created by IntelliJ IDEA.
 User: Administrator
 Date: 2020/5/27
 Time: 11:00
 To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="commons/header.jsp" %>

<style>

    .pagination {
        margin-top: 0;
        margin-bottom: 0;
    }

    .fileBox {
        position: relative;
        /**
         *  relative 相对定位两个作用：1.微调元素；2.子绝父相。
         */
    }
    .importedExcelFile {
        height: 34px;
        width: 120px;
        opacity: 0;
    }
    .coverFileBtn {
        display: block;
        position: absolute;

        left: 0;
        top: -2px;
        background-color: red;
        height: 33px;
        width: 102px;
        border: none;
        z-index: 1;
        color: #fff;
        border-radius: 4px;
    }



</style>
<div style="background-color: #ffffff; border-radius: 3px; padding: 12px;">

    <div id="goodsTableToolbar">
        <div class="fileBox" style="display: inline-block">
            <button class="btn btn-success" onclick="showAddGoodsModal()">添加</button>
            <button onclick="excelExport()" class="btn btn-success">导出</button>
            <div class="fileBox" style="display: inline-block">
                <input onchange="chooseExcel(this)" id="fileBtn" type="file" class="importedExcelFile">
                <button class="coverFileBtn">选择excel文件</button>
            </div>
            <button onclick="sureImportExcel()" class="btn btn-warning">确认导入</button>
            <a href="#">模板下载</a>
            <input id="importFileName" class="form-control">

        </div>
    </div>

    <div style="background-color: #ffffff; border-radius: 3px; padding: 12px;">
        <form class="form-inline" id="searchForm" onsubmit="javascript: return false;">
            <div class="form-group">
                <label for="goodsitem">商品类型: </label>
                <input autocomplete="off" class="form-control" id="goodsitem" name="gitem">
            </div>
            <div class="form-group">
                <label for="goodsid">商品编号: </label>
                <input autocomplete="off" class="form-control" id="goodsid" name="goodsid">
            </div>
            <div class="form-group">
                <label for="gstatus">商品状态: </label>
                <select class="form-control" id="gstatus" name="gstatus">
                    <option value="-1">全部</option>
                    <option value="1">可用</option>
                    <option value="0">不可用</option>
                </select>
            </div>
            <div class="form-group">
                <label>创建日期: </label>
                <input class="form-control" readonly autocomplete="off" name="beginRegisterDate" id="beginRegisterDate"> -
                <input autocomplete="off" readonly class="form-control" name="endRegisterDate" id="endRegisterDate">
            </div>
            <div class="form-group">
                <button class="btn btn-danger" onclick="querySearch()">搜索</button>
                <button autocomplete="off" class="btn btn-danger" onclick="resetSearch()">重置</button>
            </div>
        </form>

    <table id="goodsDataTable" class="table table-bordered table-striped"></table>


        <%--  添加商品的模态框  --%>
    <div class="modal" id="addGoodsModal" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button onclick="destoryAddGoodsModal()" class="close">
                        <span>&times;</span>
                    </button>
                    <h3 class="modal-title">添加商品</h3>
                </div>
                <div class="modal-body">
                    <form>
                        <input type="hidden" id="imageServerPath">
                        <div class="form-group">
                            <label for="name">商品名称</label>
                            <input class="form-control" autocomplete="off" id="name">
                        </div>
                        <div class="form-group">
                            <label for="gid">商品编号</label>
                            <input class="form-control" autocomplete="off" id="gid">
                        </div>
                        <div class="form-group">
                            <label for="title">标题</label>
                            <input class="form-control" autocomplete="off" id="title">
                        </div>
                        <div class="form-group">
                            <label for="items">种类</label>
                            <select class="form-control" id="items">
                            </select>
                        </div>
                        <div class="form-group">
                            <label>展示图<span style="color: red;">(在选择展示图之前必须选种类)</span></label>
                            <div style="margin-bottom: 6px;">
                                <img src="../images/default.png" width="158px" id="preDisplayImage" height="180px">
                            </div>
                            <div class="file-upload-inner file-upload-inner-right ts-forms">
                                <div class="input append-small-btn">
                                    <div class="file-button">
                                        Browse
                                        <input id="displayImage" name="displayImage" autocomplete="off"
                                               onchange="uploadDispalyImage(this)"
                                               type="file">
                                    </div>
                                    <input type="text" autocomplete="off" id="append-small-btn"
                                           placeholder="no file selected">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="price">价格</label>
                            <input class="form-control" autocomplete="off" id="price">
                        </div>
                        <div class="form-group">
                            <label for="stock">库存</label>
                            <input class="form-control" autocomplete="off" id="stock">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button onclick="destoryAddGoodsModal()" class="btn btn-danger">取消</button>
                    <button class="btn btn-success" onclick="addGoods()">确认</button>
                </div>
            </div>
        </div>
    </div>

    <!--  编辑模态框 -->
    <div class="modal fade" id="editModal" data-backdrop="static" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">编辑用户</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <input class="form-control" type="hidden" id="editId">
                        </div>
                        <div class="form-group">
                            <label>商品编号</label>
                            <input class="form-control" id="editGoodsId">
                        </div>
                        <div class="form-group">
                            <label>价格</label>
                            <input class="form-control" id="editPrice">
                        </div>
                        <div class="form-group">
                            <label>库存</label>
                            <input class="form-control" id="editNum">
                        </div>
                        <div class="form-group">
                            <label>状态</label>
                            <select class="form-control" id="editStatus">
                                <option value="1">可用</option>
                                <option value="0">不可用</option>
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" onclick="saveGoods(($('#editId').val()))" class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>


<%@ include file="commons/footer.jsp" %>
<script>
    /**
     * {
     *           "total": 23,
     *           "rows": [{type: '', }, {}, {}]
     *       }
     */
    $('#goodsDataTable').bootstrapTable({
        url: '${pageContext.servletContext.contextPath}/goods',
        method: 'GET',
        columns: [
            // field是返回rows中每个对象的属性名
            {title: '类型', field: 'type', align: 'center'},
            {title: '商品编号', field: 'gid', align: 'center'},
            {title:'商品名称', field:'name', align:'center'},
            {title: '描述信息', field: 'title', align: 'center', formatter: formatTitle},
            {title: '价格', field: 'price', align: 'center'},
            {title: '状态', field: 'status', align: 'center', formatter: formatStatus},
            {title: '库存', field: 'stock', align: 'center'},
            {title: '创建日期', field: 'createTime', align: 'center', formatter: formatRegisterDate},
            {title: '更新日期', field: 'updateTime', align: 'center', formatter: formatRegisterDate},
            {title: '操作', align: 'center', formatter: addProcessBtn}
        ],
        queryParams: function(params) {
            /**
             * 无论是 "初始化" 或者 "refresh" 都会执行该方法，来获取请求的参数.
             * 所以我们无论是 "初始化" 或者 “refresh” 都去获取表单的数据
             */
            var gitem = $('#goodsitem').val();
            var goodsid = $('#goodsid').val();
            var gstatus = $('#gstatus').val();
            var begin = $('#beginRegisterDate').val();
            var end = $('#endRegisterDate').val();

            params.gitem = gitem;
            params.gid = goodsid;
            params.gstatus = gstatus;
            params.begin = begin;
            params.end = end;
            return params;
        },
        /**
         * 决定了在哪边分页：client server, 两种不同的配置决定了服务器端返回的数据格式。
         *  client分页, 服务器端返回的数据  [{}, {}, {}]
         *  server端分页，服务器端返回的数据：{rows:[{}, {}], total: 23}
         */
        sidePagination: 'server',
        pagination: true, //表示使用分页
        toolbar: '#goodsTableToolbar'  //设置工具条
    })

    // 点击搜索按钮的，执行搜素
    function querySearch() {
        // 跳转到表格的第一页
        $('#goodsDataTable').bootstrapTable('selectPage', 1);
    }

    // 重置实现
    function resetSearch() {
        $('#goodsitem').val('');
        $('#goodsid').val('');
        $('#endRegisterDate').val('');
        $('#beginRegisterDate').val('');
        $('#gstatus').val('-1');
        $('#goodsDataTable').bootstrapTable('selectPage', 1);
    }

    //格式化商品创建和更新日期
    function formatRegisterDate(value) {
        // 使用moment这个库来完成日期的格式化
        return moment(value).format('YYYY-MM-DD HH:mm:ss');
    }

    /**
     * 当内容长度大于30的时候，多余的不显示
     * @param value
     * @returns {string|*}
     */
    function formatTitle(value) {
        var length = value.length; //获取文本长度
        if (length > 30) {
            return value.substring(0, 31) + '...';
        }
        return value;
    }

    // 格式化商品的状态
    function formatStatus(value) {
        if (value == 1) {
            return '<span class="label label-success">可用</span>'
        }
        return '<span class="label label-warning">不可用</span>'
    }

    // 添加操作按钮
    function addProcessBtn(value, row) {
        var goodsId = row.id;
        return '<button onclick="deleteGoods(' + goodsId + ')" class="btn btn-danger btn-xs">删除</button>' +
            '<button onclick="editGoods(' + goodsId + ')" class="btn btn-success btn-xs">编辑</button>'
    }


    //编辑商品列表
    function editGoods(goodsId) {
        $.ajax({
            url: '${pageContext.servletContext.contextPath}/goods/' + goodsId,
            dataType: 'json',
            type: 'get',
            success: function (_data) {
                $('#editId').val(_data.id)
                $('#editGoodsId').val(_data.gid);
                $('#editPrice').val(_data.price);
                $('#editNum').val(_data.stock);
                $('#editStatus').val(_data.status);
                $('#editModal').modal('show');

            }
        })
    }

    //提交编辑后的商品
    function saveGoods(editId) {
        var eGoodId = $('#editGoodsId').val();
        var eGoodPrice = $('#editPrice').val();
        var eGoodNum = $('#editNum').val();
        var eGoodStatus = $('#editStatus').val();


        //构建请求的参数
        var requestEditParams = {
            id: editId,
            gid: eGoodId,
            price: eGoodPrice,
            stock: eGoodNum,
            status: eGoodStatus,
        }

        $.post('${pageContext.servletContext.contextPath}/goods', requestEditParams, function (_data) {
            if (_data.code > 0) {
                //刷新商品页面
                $('#goodsDataTable').bootstrapTable('refresh');
                //隐藏编辑模态框
                $('#editModal').modal('hide')
            } else {
                showErrorBox('修改失败，请联系管理员');
            }
        }, 'json');
    }


    // 删除对应的商品，实际就是改状态
    function deleteGoods(goodsId) {
        $.ajax({
            url: '${pageContext.servletContext.contextPath}/goods/' + goodsId,
            dataType: 'json',
            type: 'put',
            success: function (_data) {
                // 表示删除成功，更新表格
                if (_data.code > 0) {
                    $('#goodsDataTable').bootstrapTable('refresh');
                } else { // 删除失败，给用户一个提示
                    showErrorBox('删除失败, 请联系管理员.')
                }
            }
        })
    }

    /**
     * 展示添加的模态框
     *   1. 首先将所有种类查出来，渲染在模态框中的种类下拉列表中
     *   2. 显示模态框
     */
    function showAddGoodsModal() {
        var items = $('#items');
        items.empty(); //清空种类的下拉列表
        /**
         * 第一个参数url地址
         * 第二个参数是请求的参数
         * 第三个参数是回调方法。
         */
        $.getJSON('${pageContext.servletContext.contextPath}/goods/item', {}, function (_data) {
            for (var i = 0; i < _data.length; i++) {
                var item = _data[i];
                // <option value="3#shoes">鞋子</option>
                items.append('<option value="' + (item.id + '#' + item.alias) + '">' + item.name + '</option>')
            }
        });

        $('#addGoodsModal').modal('show');
    }

    // 隐藏模态框
    function destoryAddGoodsModal() {
        resetModal();
        $('#addGoodsModal').modal('hide');
    }

    /**
     * 上传展示图：
     *    1.在选择图片旁边的那个输入框中显示文件的名字；
     *    2.上传图片。
     *    3.回显图片。
     */
    function uploadDispalyImage(fileTag) {
        var item = $('#items').val(); //取种类的值，目的是上传的文件放在哪个目录下

        var itemAlias = item.split('#')[1];

        var displayImage = fileTag.files[0];
        // console.log(displayImage.name)  //文件的名字，在很多网站中要去判断文件的格式是否正确，要通过后缀来判断
        // console.log(displayImage.size); // 文件的大小，单位是字节，如果要判断多少 M, size / (1024 * 1024) 结果单位就位M
        var name = displayImage.name;

        $('#append-small-btn').val(name);

        var formData = new FormData();
        formData.append('displayImage', displayImage);
        formData.append('itemAlias', itemAlias);
        // formData.append('method', 'uploadDisplayImage')

        $.ajax({
            url: '${pageContext.servletContext.contextPath}/goods/update',
            type: 'post',
            dataType: 'json',
            data: formData,
            /**
             * 内容类型。默认值：application/x-www-form-urlencoded;
             * false表示不设置，将FormData原封不动的直接提价服务器端
             */
            contentType: false,
            /**
             * processData 处理数据， 例如get请求，会将data中的数据，name=张三&password=125,
             * 对于FormData包含文件，此处要为false, 禁止转换
             */
            processData: false,
            success: function (_data) {
                // {"filePath":"mobile/147617383170300EfssbV3XDA8PFrTsSj.jpg","imageUrl":"http://localhost/mobile/147617383170300EfssbV3XDA8PFrTsSj.jpg"}
                $('#preDisplayImage').prop('src', _data.imageUrl);  //回显图片
                $('#imageServerPath').val(_data.filePath);
                console.log('============')
                console.log(_data.filePath)
            }
        })
    }

    // 关闭模态框的时候，重置所有的信息
    function resetModal() {
        $('#imageServerPath').val('');
        $('#items').empty();
        $('#append-small-btn').val('');
        $('#preDisplayImage').prop('src', '../images/default.png');

        $('#title').val('');
        $('#price').val('');
        $('#stock').val('');
        $('#displayImage').val('');
    }

    // 添加商品
    function addGoods() {
        var imageServerPath = $('#imageServerPath').val();  //商品的路径
        var item = $('#items').val(); // 1#books 种类
        var itemId = item.split('#')[0]; //获取种类的id
        var price = $('#price').val();  //价格
        var stock = $('#stock').val();
        var title = $('#title').val();
        var name = $('#name').val();
        var goodsId = $('#gid').val();

        // 构建请求的参数
        var requestParams = {
            small_pic: imageServerPath,
            item_id: itemId,
            price: price,
            stock_num: stock,
            title: title,
            name:name,
            goods_id:goodsId,
        };

        /**
         * 第一个是地址
         * 第二个是数据
         * 第三个是回调函数
         * 第四个是服务器返回的数据类型
         */
        $.post('${pageContext.servletContext.contextPath}/goods/add', requestParams, function (_data) {
            if (_data.code > 0) {
                destoryAddGoodsModal(); //销毁添加商品模态框
                $('#goodsDataTable').bootstrapTable('refresh');
                //弹框提示禁用失败
                Lobibox.notify('info',{
                    title:'提示',
                    msg: '添加成功',
                    size:'mini'
                })
            } else {
                destoryAddGoodsModal(); //销毁添加商品模态框
                showErrorBox('添加商品失败，请联系管理员.')
            }
        }, 'json');
    }


    /**
     *导入excel文件
     */

    //点击文件按钮显示文件名
    function chooseExcel(fileTag) {
        //文件按钮的信息
        var currentFile = fileTag.files[0];
        //获取文件的名字
        var fileName =  currentFile.name;
        //回显文件名
        $('#importFileName').val(fileName)

    }


    //点击确认导入实现文件的异步上传
    function sureImportExcel() {
        //通过dom获取要上传的文件
        var fileBtn = document.getElementById('fileBtn');
        var file = fileBtn.files[0];

        // $('body').mLoading('show');

        $('body').mLoading({
            text:"正在导入中...",//加载文字，默认值：加载中...
            mask:true//是否显示遮罩效果，默认显示
        });

        var formData = new FormData();
        formData.append('goodsExcel',file);

        $.ajax({
            url:'${pageContext.servletContext.contextPath}/goods/import',
            type:'post',
            dataType:'json',
            // 因为默认的 contentType是 application/x-www-form-urlencoded, 设置false目的是将 FormData 直接丢上去。
            contentType: false,
            data: formData,
            // 数据不作任何的处理
            processData: false,
            success:function (_data) {
                fileBtn.value = '';
                $('#importFileName').val('');
                $('body').mLoading('hide'); //隐藏加载框
                if (_data.code>0){
                    Lobibox.notify('info', {
                        title: '提示',
                        msg: '导入成功',
                        size: 'mini'
                    })
                    $('#dataTable').bootstrapTable('selectPage', 1);
                }else {
                    Lobibox.notify('info', {
                        title: '提示',
                        msg: '导入失败，请联系管理员！',
                        size: 'mini'
                    })
                }

            }

        })
    }


    //导出excel文件，也就是下载
    function excelExport() {
        // 前提是 form必须有名字
        // name=fef&gender=M&begin=2020-10-13&end=2020-10-21&companyId=1
        // var searchContent = $('#searchForm').serialize();

        var searchContent = $('#searchForm').serialize();

        location.href = '${pageContext.servletContext.contextPath}/goods/export?' + searchContent
    }

</script>
